<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
         <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
         <div id="main" style="width: 1500px;height: 700px"></div>
         <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '数据图展示',
                    left: '50%',
                    textStyle: {
                        fontSize: 30,
                        color: "rgba(100, 10, 10, 1)",
                        fontWeight: "bolder"
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: 'bottom'
                },
                //功能按钮
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    name: '商品',
                    nameTextStyle: {
                        fontSize: 15
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '销量',
                    nameTextStyle: {
                        fontSize: 15
                    }
                },
                grid: {
                    left: '10%',
                    right:'45%',
                    top: '10%'
                },
                //系列数据从 dataset 中取
                dataset: {
                    source: [
                        ['衬衫', 5],
                        ['羊毛衫', 20],
                        ['雪纺衫', 36],
                        ['裤子', 10],
                        ['高跟鞋', 10],
                        ['袜子', 20]
                    ]
                },
                series: [{
                        type: 'pie',
                        radius: [30, 170],
                        center: ['80%', '55%'],
                    // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
                    encode: { itemName: 0, value: 1 }
                },
                    {
                        type: 'bar',
                        encode: { x: 0, y: 1 }
                    }]
            };
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        </script>
</body>

</html>